import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
function LineData() {
  const chartRef = useRef()
  const options = {
    // 标题
    title: {
      text: '趋势统计',
    },
    // 提示框组件
    tooltip: {
      // trigger: 'axis'
    },
    // 图例组件
    legend: {
      //     data:['销量'],
      //     show:true
    },
    // x轴
    xAxis: {
      type: 'category',
      data: ['7-1', '7-2', '7-3', '7-4', '7-5', '7-6', '7-7'],
    },
    // y轴
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [20, 9, 39, 43, 60, 18, 50],
        type: 'line', //折线图
        // type: 'bar', // 柱状图
        name: '收入',
      },
      {
        data: [10, 19, 29, 33, 30, 28, 10],
        type: 'line', // 折线图
        // type: 'bar', // 柱状图
        name: '支出',
      },
    ],
  }

  useEffect(() => {
    // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
    const chart = echarts.init(chartRef.current)

    // 设置图表实例的配置项和数据
    chart.setOption(options)

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例。实例销毁后无法再被使用
      chart.dispose()
    }
  }, [])
  return (
    <div
      style={{
        width: '60vw',
        height: '400px',
        margin: '2vh 0px 5vh 3vw',
      }}
      ref={chartRef}></div>
  )
}
export default LineData
